<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>深度监视</title>
</head>
<script src="../../js/vue.js"></script>
<body>
<div id="root">
    <h2>今天天气很{{info}}</h2>
    <button @click="change">切换天气</button>
    <br>
    <h3>a的值是:{{numbers.a}}</h3>
    <!--可以在监听事件里书写简单的语法-->
    <button @click="numbers.a++">点我+1</button>
    <h3>b的值是:{{numbers.b}}</h3>
    <!--可以在监听事件里书写简单的语法-->
    <button @click="numbers.b++">点我+1</button>
    <h3>c的值是:{{numbers.c}}</h3>
    <!--可以在监听事件里书写简单的语法-->
    <button @click="numbers.c++">点我+1</button>
    <h3>d的值是:{{numbers.d}}</h3>
    <!--可以在监听事件里书写简单的语法-->
    <button @click="numbers.d++">点我+1</button>
</div>
<script>
    const vm = new Vue({
        el: '#root',
        data: {
            isHot: true,
            numbers: {
                a: 1,
                b: 2,
                c: 3,
                d: 4
            }
        },
        computed: {
            info() {
                return this.isHot ? '炎热' : '凉爽'
            }
        },
        methods: {
            change() {
                this.isHot = !this.isHot;
            }
        },
        watch: {
            isHot: {
                immediate: true,
                handler(newValue, oldValue) {
                    console.log('isHost被修改了');
                    console.log('修改后的值为:', newValue ? '炎热' : '凉爽')
                    console.log('修改前的值为:', oldValue ? '炎热' : '凉爽')
                }
            },
            //只检测a,不检测b 监视多级结构中某个属性的变化  如果不用双引号包裹numbers.a会报错,原因是不合法的key,对象里的key是字符串
            'numbers.a': {
                handler(after, before) {
                    console.log('a被改变了')
                }
            },
            //监视多级结构中所有属性的变化,vue默认是可以检测到多级数据的改变的,但是vue中的watch默认是不行的,需要加deep:true开启
            numbers: {
                //开启深度监视
                deep: true,
                handler() {
                    console.log('numbers改变了')
                }
            },

            //简写形式:只需要handler,不需要其他配置项的时候可以用简写形式
            'numbers.b'(newValue, oldValue) {
                console.log('b的值发生了改变')
            }
        },
    })
    /**
     * vue中的watch默认不监测对象内部值的改变
     * 配置deep:true可以监测对象内部值改变
     *
     * 备注:
     *  vue自身可以检测对象内部值的改变,但vue提供的watch默认不检测
     *  使用watch的时候要根据数据的具体结构,来决定是否采用深度检测
     */
</script>
</body>
</html>